<template>
  <div v-show="false" class="print-bill">
    <div style="margin: 20px; color: #000; font-weight: bold; font-family: 'Microsoft YaHei'">
      <h1 style="text-align: center">生产流程单</h1>
      <div style="line-height: 24px">生产流程编号：{{ checkData.prodPlanCode }}</div>
      <table
        border="1"
        cellpadding="0"
        cellspacing="0"
        width="100%"
        style="border-collapse: collapse; outline: 1px solid black"
      >
        <tbody style="outline: 1px solid black">
          <tr style="line-height: 35px">
            <td width="100" rowspan="4" class="title-class">生产基本信息</td>
            <td width="150" class="title-class" style="text-align: center">客户单位</td>
            <td width="100" colspan="7" class="data-class" style="text-align: center">
              {{ checkData.customerName }}
            </td>
          </tr>
          <tr style="line-height: 35px">
            <td width="150" rowspan="2" class="title-class" style="text-align: center">产品名称</td>
            <td width="100" rowspan="2" colspan="5" class="name-class" style="text-align: center">
              {{ checkData.productName }}
            </td>
            <td width="100" class="title-class" style="text-align: center">规格型号</td>
            <td width="100" class="data-class" style="text-align: center">
              {{ checkData.specModel }}
            </td>
          </tr>
          <tr style="line-height: 35px">
            <td width="100" class="title-class" style="text-align: center">类型</td>
            <td width="100" class="data-class" style="text-align: center">
              {{ checkData.productCategory }}
            </td>
          </tr>
          <tr style="line-height: 35px">
            <td width="150" class="title-class" style="text-align: center">计划生产数量</td>
            <td width="100" class="data-class" style="text-align: center">
              {{ checkData.planProdQty }}
            </td>
            <td width="100"></td>
            <td width="100"></td>
            <td width="100"></td>
            <td width="100"></td>
            <td width="100" class="title-class" style="text-align: center">交货日期</td>
            <td width="100" class="data-class">
              <span v-if="checkData.deliveryDate" style="text-align: center">
                {{ dayjs(checkData.deliveryDate).format('YYYY-MM-DD') }}
              </span>
            </td>
          </tr>
        </tbody>
        <tbody style="outline: 1px solid black">
          <tr style="line-height: 35px">
            <td
              width="150"
              :rowspan="checkData.detailList ? checkData.detailList.length + 1 : 1"
              class="title-class"
              style="text-align: center"
            >
              生产材料出库
            </td>
            <td width="150" class="title-class" style="text-align: center">名称</td>
            <td width="150" class="title-class" style="text-align: center">规格</td>
            <td width="100" class="title-class" style="text-align: center">材质代码</td>
            <td width="100" class="title-class" style="text-align: center">压线</td>
            <td width="100" class="title-class" style="text-align: center">单位</td>
            <td width="100" class="title-class" style="text-align: center">计划数量</td>
            <td width="100" class="title-class" style="text-align: center">实际领料数量</td>
            <td width="100" class="title-class" style="text-align: center">仓管员</td>
          </tr>
          <tr v-for="(item, index) in checkData.detailList" :key="index" style="line-height: 35px">
            <td width="100" class="name-class" style="height: 50px">{{ item.materialName }}</td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ item.spec }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ item.materialCode }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ item.crimpLine }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ item.unit }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ item.qty }}
            </td>
            <td width="100"></td>
            <td width="100"></td>
          </tr>
        </tbody>
        <tbody style="outline: 1px solid black">
          <tr style="line-height: 35px">
            <td
              width="150"
              :rowspan="checkData.processNameList ? checkData.processNameList.length + 1 : 1"
              class="title-class"
              style="text-align: center"
            >
              工序内容
            </td>
            <td width="100" colspan="2" class="title-class" style="text-align: center">名称</td>
            <td width="100" class="title-class" style="text-align: center">开始时间</td>
            <td width="100" class="title-class" style="text-align: center"></td>
            <td width="100" class="title-class" style="text-align: center"></td>
            <td width="100" class="title-class" style="text-align: center">完成数量</td>
            <td width="100" class="title-class" style="text-align: center">完成时间</td>
            <td width="100" class="title-class" style="text-align: center">负责人</td>
          </tr>
          <tr
            v-for="(name, index) in checkData.processNameList"
            :key="index"
            style="line-height: 35px"
          >
            <td width="100" colspan="2" class="name-class" style="height: 50px">{{ name }}</td>
            <td width="100" style="height: 50px"></td>
            <td width="100" style="height: 50px"></td>
            <td width="100" style="height: 50px"></td>
            <td width="100" style="height: 50px"></td>
            <td width="100" style="height: 50px"></td>
            <td width="100" style="height: 50px"></td>
          </tr>
        </tbody>

        <tbody style="outline: 1px solid black">
          <tr style="line-height: 35px">
            <td
              width="150"
              :rowspan="checkData.detailList ? checkData.detailList.length + 1 : 1"
              class="title-class"
              style="text-align: center"
            >
              余料入库
            </td>
            <td width="100" class="title-class" style="text-align: center">名称</td>
            <td width="100" class="title-class" style="text-align: center">规格</td>
            <td width="100" class="title-class" style="text-align: center">材质代码</td>
            <td width="100" class="title-class" style="text-align: center">压线</td>
            <td width="100" class="title-class" style="text-align: center">单位</td>
            <td width="100" class="title-class" style="text-align: center">数量</td>
            <td width="100" class="title-class" style="text-align: center">存放区</td>
            <td width="100" class="title-class" style="text-align: center">仓管员</td>
          </tr>
          <tr v-for="(item, index) in checkData.detailList" :key="index" style="line-height: 35px">
            <td width="150" class="name-class" style="height: 50px">{{ item.materialName }}</td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ item.spec }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ item.materialCode }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ item.crimpLine }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ item.unit }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center"></td>
            <td width="100" style="height: 50px"></td>
            <td width="100" style="height: 50px"></td>
          </tr>
        </tbody>

        <tbody style="outline: 1px solid black">
          <tr style="line-height: 35px">
            <td width="150" rowspan="2" class="title-class" style="text-align: center">成品入库</td>
            <td width="100" class="title-class" style="text-align: center">名称</td>
            <td width="100" class="title-class" style="text-align: center">规格</td>
            <td width="100" class="title-class" style="text-align: center">材质代码</td>
            <td width="100" class="title-class" style="text-align: center">压线</td>
            <td width="100" class="title-class" style="text-align: center">单位</td>
            <td width="100" class="title-class" style="text-align: center">数量</td>
            <td width="100" class="title-class" style="text-align: center">存放区</td>
            <td width="100" class="title-class" style="text-align: center">仓管员</td>
          </tr>
          <tr style="line-height: 35px">
            <td width="150" class="name-class" style="height: 50px">
              {{ checkData.productName }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ checkData.specModel }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ checkData.materialCode }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ checkData.crimpLine }}
            </td>
            <td width="100" class="data-class" style="height: 50px; text-align: center">
              {{ checkData.unit }}
            </td>
            <td width="100" style="height: 50px"></td>
            <td width="100" style="height: 50px"></td>
            <td width="100" style="height: 50px"></td>
          </tr>
        </tbody>
        <tr style="height: 70px">
          <td width="150" class="title-class" style="text-align: center">备注</td>
          <td width="100" colspan="8" class="data-class">{{ checkData.remark }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ProductionPlanResItem } from '@renderer/api/productionDep'
import dayjs from 'dayjs'

interface Props {
  checkData: Partial<ProductionPlanResItem>
}
withDefaults(defineProps<Props>(), {
  checkData: () => {
    return {}
  }
})
//打印详情
const printInfo = () => {
  const element = document.createElement('div')
  element.innerHTML = (document as any).querySelector('.print-bill').innerHTML
  document.body.appendChild(element)
  ;(document as any).querySelector('#app').style.display = 'none'
  window.onafterprint = () => {
    ;(document as any).querySelector('#app').style.display = 'block'
    document.body.removeChild(element)
  }
  window.print()
}
defineExpose({ printInfo })
</script>
<style scoped lang="less">
.title-class {
  color: #d4d4d4;
  font-weight: lighter;
}
.data-class {
  font-weight: 800;
  font-size: 16px;
}
.name-class {
  font-weight: lighter;
  font-size: 16px;
}
</style>
